<script setup lang="ts">
import { h } from 'vue'
import { NIcon, NButton } from 'naive-ui'
import { Bug, Copy, DotsVertical } from '@vicons/tabler'

interface Props {
  avatarSrc: string
  title: string
  author: string
  description: string
  useCount: number
  textCount: number
  fileCount: number
}

const props = withDefaults(defineProps<Props>(), {
  avatarSrc: '',
  title: '',
  author: 'aa',
  description: '',
  useCount: 0,
  textCount: 0,
  fileCount: 0
})

const handleActionSelect = (key: string) => {
  if (key === 'copy') {
    console.log('copy')
  } else if (key === 'delete') {
    console.log('delete')
  }
}

const options = [
  {
    label: '复制知识库',
    key: 'copy',
    icon: () => h(NIcon, null, { default: () => h(Copy) })
  },
  {
    label: '删除知识库',
    key: 'delete',
    props: {
      style: 'color: red;'
    },
    icon: () =>
      h(
        NIcon,
        {
          class: 'color-red'
        },
        { default: () => h(Bug) }
      )
  }
]
</script>
<template>
  <flexible-card
    :avatarSrc="props.avatarSrc"
    :name="props.title"
    :subtitle="`作者：${props.author}`"
    :description="props.description"
    :footerLeft="`${props.textCount}文档·${props.fileCount}字符`"
    :footerRight="`${props.useCount}关联应用`"
    :isActionHover="true"
  >
    <template #action>
      <n-Dropdown :options="options" @select="handleActionSelect">
        <n-button text size="small">
          <n-icon size="20"> <DotsVertical /> </n-icon>
        </n-button>
      </n-Dropdown>
    </template>
  </flexible-card>
</template>
<style scoped lang="scss">
// Variables
$primary-color: #155aef;
$bg-color: white;
$text-color: #333;
$gray-color: #808080;
$light-gray: #f5f5f5;
$border-radius: 8px;

// Mixins
@mixin flex-center {
  display: flex;
  align-items: center;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin hover-effect {
  transition: all 0.3s ease;
  &:hover {
    background-color: rgba($primary-color, 0.08);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}
</style>
